import React from 'react';
import {Platform, View} from 'react-native';
import {useTranslation} from 'react-i18next';
import {ThemeType} from '@/theme';
import {useMMKVString} from '@/hooks/useMMkv';
import {Radio} from 'tsun-smart-ui';
import HotUpdate from 'react-native-ota-hot-update';
interface ThemeOption {
  value: ThemeType;
  label: string;
}

const ThemeSettingsScreen = () => {
  const {t} = useTranslation();
  const [selectedTheme = 'light', setSelectedTheme] =
    useMMKVString<ThemeType>('theme');
  // 主题选项列表
  const themeOptions: ThemeOption[] = [
    {
      value: 'light',
      label: t('layout.background.lightColor', {defaultValue: '浅色'}),
    },
    {
      value: 'dark',
      label: t('layout.background.darkColor', {defaultValue: '深色'}),
    },
    {
      value: 'system',
      label: t('layout.background.followSystem', {defaultValue: '跟随系统'}),
    },
  ];

  return (
    <View className="rounded-xl bg-background-0 mx-4 mt-4">
      <Radio
        onChange={value => {
          setSelectedTheme(value);
          if (Platform.OS === 'android') {
            HotUpdate.resetApp();
          }
        }}
        value={selectedTheme}
        data={themeOptions}></Radio>
    </View>
  );
};

export default ThemeSettingsScreen;
